<template>
  <div class="hello">
    <h1>{{ msg }}</h1> <!-- 文本插值 -->
    <div id="hello2">
        <span v-bind:title="message"> <!-- v-bind：动态数据绑定 -->
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <p v-if="seen"> <!-- v-if:条件判断 -->
          你现在看到我了
        </p>
        <ol>
          <li v-for="todo in datas"> <!-- v-for:循环 -->
              {{ todo.text }}
          </li>
        </ol>

        <button v-on:click="reverseMessage">触发事件</button> <!-- v-on:添加事件监听器 -->
        <input type="text" v-model="msg"> <!-- v-model 实现表单输入和应用状态之间数据的双向绑定 -->

        <ol v-html="html"></ol> <!-- v-html 用于输出html代码 -->
        <br>
        <!-- javascript表达式 -->
        {{ 8+7 }}<br>
        {{ flag ? '正确' : '错误' }}<br>
        {{ text.split('').reverse().join('') }}
    </div>

    <!-- 引用组件 -->
    <test></test>
    <!-- 引用全局组件 -->
    <!-- <todoitem></todoitem> -->

    <!-- 过滤器使用 -->
    {{ filter | filter2 }}

    <!-- 计算属性computed和数据绑定联合使用，这是一个常用且强大的模式-->
    <div v-bind:class="classObject"></div>

    <!-- v-bind绑定内联样式 -->
    <div v-bind:style="{color: 'red'}">当你老了</div>

     <!-- v-on:添加事件监听器 -->
     <button v-on:click="counter += 1">
       <p>这个按钮被点击了 {{ counter }}次</p>
     </button>
     <button v-on:click="say('hi')">say hi</button>
     <button v-on:click="say('hello')">say hello</button>

     <!-- 表单 -->
     <p>单选框：</p>
     <input type="checkbox" id="checkbox" v-model="checked">
     <label for="checkbox">{{ checked }}</label>

     <p>复选框：</p>
     <input type="checkbox" id="js"  value="js" v-model="checkedNames">
     <label for="js">js</label>
     <input type="checkbox" id="java"  value="java" v-model="checkedNames">
     <label for="java">java</label>
     <input type="checkbox" id="vue"  value="vue" v-model="checkedNames">
     <label for="vue">vue</label>
     <span>选择的值为：{{ checkedNames }}</span>

    <!-- 组件引用，并传参 -->
     <test2 message="prop属性传参"></test2>

     <!-- 路由 -->
     <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <p>
      <router-link to="/foo">Go to foo</router-link>
      <router-link to="/bar">Go to bar</router-link>
    </p>
    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  </div> 
</template>

<script>
/* 引入组件 */
import Test from '@/components/Test'
import Test2 from '@/components/Test2'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome ',
      message: '页面加载于 ' + new Date().toLocaleString(),
      seen: true, /* 如果为false,则 v-if后面的内容不会执行 */
      datas: [
        { text: '学习JavaScript' },
        { text: 'vue 入门学习' },
        { text: '整个牛项目' }
      ],
      html: '<li>v-html指令使用</li>',
      flag: true,
      text: 'Vue中使用JavaScript表达式',
      filter: '过滤器使用（格式化时加上Vue）',
      isActive: true,
      error: null,
      counter: 0,
      checked: false,
      checkedNames: []
    }
  },
  methods: {
    reverseMessage: function () {
      this.msg = 'hello world'
    },
    say: function (message) {
      alert(message)
    }
  },
  components: {
    Test,
    Test2
  },
  filters: {
    filter2: function (value) {
      if (!value) return '值为空'
      value = 'Vue' + value.toString()
      return value
    }
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}

h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}


</style>
